<!DOCTYPE html>
<html>
<head>
    <title>LUI组件库</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Pragma" content="no-cache">
    <meta name="keywords" content="LUI，轻量级移动端UI组件库"/>
    <meta name="description" content="LUI，基于html,css,js原生能力驱动，轻量级移动端UI组件库。LUI不是框架，她只是为你的应用提供基础的UI组合以及一些常用方法，架构层面随你自行组织" />
    <link rel="icon" href="images/icon/lui.png">
    <link rel="stylesheet" type="text/css" href="css/lui.css" />
</head>
<body>
    <div class="ui_page_wrap">
        <header class="ui_page_hd">LUI</header>
        <div class="ui_page_bd">
            <script id="tpl" type="text/html">
                <section>
                    <fieldset class="ui_legend">
                        <legend>基础组件</legend>
                    </fieldset>
                    <ul class="ui_list_padded ui_list_arrow">
                        {{# for(var i = 0,len = d.baseComponent.length;i< len;i++ ){ }}
                            <li>
                              <a class="pt10 pb10" href="{{d.baseComponent[i].href}}">                           
                                <span class="mr5 f18">{{d.baseComponent[i].enText}}</span>
                                {{d.baseComponent[i].text}}
                              </a>
                            </li>
                        {{# } }}
                    </ul>
                </section>
                <section>
                    <fieldset class="ui_legend">
                        <legend>表单组件</legend>
                    </fieldset>
                    <ul class="ui_list_padded ui_list_arrow">
                        {{# for(var i = 0,len = d.formComponent.length;i< len;i++ ){ }}
                            <li>
                              <a class="pt10 pb10" href="{{d.formComponent[i].href}}">                           
                                <span class="mr5 f18">{{d.formComponent[i].enText}}</span>
                                {{d.formComponent[i].text}}
                              </a>
                            </li>
                        {{# } }}
                    </ul>
                </section>
                <section>
                    <fieldset class="ui_legend">
                        <legend>展示组件</legend>
                    </fieldset>
                    <ul class="ui_list_padded ui_list_arrow">
                        {{# for(var i = 0,len = d.displayComponent.length;i< len;i++ ){ }}
                            <li>
                              <a class="pt10 pb10" href="{{d.displayComponent[i].href}}">            
                                <span class="mr5 f18">{{d.displayComponent[i].enText}}</span>
                                {{d.displayComponent[i].text}}
                              </a>
                            </li>
                        {{# } }}
                    </ul>
                </section>
                <section>
                    <fieldset class="ui_legend">
                        <legend>导航组件</legend>
                    </fieldset>
                    <ul class="ui_list_padded ui_list_arrow">
                        {{# for(var i = 0,len = d.navigatorComponent.length;i< len;i++ ){ }}
                            <li>
                              <a class="pt10 pb10" href="{{d.navigatorComponent[i].href}}">                            
                                <span class="mr5 f18">{{d.navigatorComponent[i].enText}}</span>
                                {{d.navigatorComponent[i].text}}
                              </a>
                            </li>
                        {{# } }}
                    </ul>
                </section>
                <section>
                    <fieldset class="ui_legend">
                        <legend>操作反馈组件</legend>
                    </fieldset>
                    <ul class="ui_list_padded ui_list_arrow">
                        {{# for(var i = 0,len = d.feedbackComponent.length;i< len;i++ ){ }}
                            <li>
                              <a class="pt10 pb10" href="{{d.feedbackComponent[i].href}}">
                                <span class="mr5 f18">{{d.feedbackComponent[i].enText}}</span>
                                {{d.feedbackComponent[i].text}}
                              </a>
                            </li>
                        {{# } }}
                    </ul>     
                </section>   
                <section>
                    <fieldset class="ui_legend">
                        <legend>其他</legend>
                    </fieldset>
                    <ul class="ui_list_padded ui_list_arrow">
                        {{# for(var i = 0,len = d.list.length;i< len;i++ ){ }}
                            <li>
                              <a class="pt10 pb10" href="{{d.list[i].href}}">
                                <span class="mr5 f18">{{d.list[i].enText}}</span> 
                                {{d.list[i].text}}
                              </a>
                            </li>
                        {{# } }}
                    </ul>     
                </section>         
            </script>

            <div id="tpl_view"></div>
            <div class="ui_noMore">
              <span class="ui_noMore_text">我是有底线的</span>
            </div>
        </div>
        <a href="../docs/#/" id="j-docs" target="_blank" class="sticky_bottom_btn">docs</a>
    </div>
    <!--laytpl资料 https://www.cnblogs.com/JsonShare/p/6018497.html-->
    <script type="text/javascript" src="js/3rd-plugins/laytpl.js"></script>  
    <script type="text/javascript" src="js/lui.js"></script>
    <script type="text/javascript" src="js/lib/TouchElement.js"></script>
    <script type="text/javascript">
        //排序
        function sortFn(a, b) {
          if (a.enText < b.enText) {
            return -1
          }
          if (a.enText > b.enText) {
            return 1
          }
          return 0
        }
         lui.request({
            type:'GET',
            url:'js/data/lui.json',
            success:function(res){
                res.baseComponent = res.baseComponent.sort(sortFn)
                res.formComponent = res.formComponent.sort(sortFn)
                res.displayComponent = res.displayComponent.sort(sortFn)
                res.navigatorComponent = res.navigatorComponent.sort(sortFn)
                res.feedbackComponent = res.feedbackComponent.sort(sortFn)
                res.list = res.list.sort(sortFn)
                var getTpl = document.getElementById('tpl').innerHTML;
                laytpl(getTpl).render(res, function(html){
                  document.getElementById('tpl_view').innerHTML = html;
                });
            }
        })
        //移动元素实例化
        new TouchElement('#j-docs')
    </script>
</body>
</html>